<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <link rel="stylesheet" href="../common.css">
    <style>
        .search {
            width: 1200px;
            height: 50px;
            border: 1px solid #ccc;
            padding-left: 20px;
            box-sizing: border-box;
            margin: 5px auto;
        }

        .search>div {
            margin: 0px 10px;
        }

        .search input[type='radio'] {
            margin: 0px 5px;
        }

        .search>button {
            width: 50px;
            margin: 0px 10px;
        }

        table {
            width: 1200px;
            border-collapse: collapse;
            margin: 0 auto;
        }

        td,
        th {
            border: 1px solid #cccccc;
            padding: 2px 0px;
            text-align: center;
        }

        thead>tr {
            background: lightseagreen;
        }

        tbody>tr:nth-child(even) {
            background: lightcyan;
        }

        .upd,
        .del {
            border: 1px solid #cccccc;
            outline: none;
        }

        .upd {
            width: 50px;
            background: orange;
        }

        .del {
            width: 50px;
            margin: 0px 0px 0px 5px;
            background: orangered;
        }

        tfoot button {
            padding: 0 5px;
            margin: 0 5px;
        }

        tfoot>tr>td>div>div {
            margin: 0 10px;
        }

        #show{
            position: absolute;
            top:0px;
            left:0px;
            width: 100vw;
            height: 100vh;
            background: rgba(212, 219, 169, 0.3);
            display: none;
            
        }
        #show>iframe{
            width:100vw;
            height: 100vh;
        }
        #close{
            position: absolute;
            right: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px;
            border: 1px solid lightskyblue;
            background: lightpink;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="flex search a-c">
        <div>
            <span>姓名：</span>
            <input type="text" id="txtStudentName">
        </div>
        <div class="flex a-c">
            <span>性别：</span>
            <div style="border: 1px solid #ccc;padding: 2px 10px;">
                <input type="radio" value="M" name="gender">男
                <input type="radio" value="F" name="gender">女
                <input type="radio" value="" name="gender" checked>全部
            </div>
        </div>
        <button id="btnSearch">查询</button>
        <button id="add">添加</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>全选
                    <input type="checkbox" id="ckAll">
                </th>
                <th>学号</th>
                <th>密码</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年级</th>
                <th>电话</th>
                <th>地址</th>
                <th>生日</th>
                <th>邮箱</th>
                <th>身份证</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td colspan="12">
                    <div class="flex j-c a-c">
                        <button id="first">首页</button>
                        <button id="prev">上一页</button>
                        <button id="next">下一页</button>
                        <button id="last">尾页</button>
                        <div>
                            <span>到</span>
                            <input id="num" type="text" style="width: 40px; text-align: center;">
                            <span>页</span>
                            <button id="ok">确定</button>
                        </div>
                        <div>
                            <span id="pageIndex">1</span>
                            <span>/</span>
                            <span id="pageCount">1</span>
                        </div>
                        <div>
                            <span>显示数量</span>
                            <select id="pageSize">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
    <div id="show">
        <div id="close">X</div>
        <iframe name="iframe" src="./add2.html" scrolling="no" frameborder="0" class="iframe"></iframe>
    </div>
    <script src="../bing.js"></script>
    <script>
        //获取tbody对象
        let tbody = document.querySelector("tbody")
        //获取搜索按钮
        let btnSearch = document.querySelector("#btnSearch")
        //获取学生姓名文本框
        let txtStudentName = document.querySelector("#txtStudentName")
        //获取所有的性别单选框
        let genders = document.getElementsByName("gender")
        //获取当前页
        let pageIndex = document.querySelector("#pageIndex")
        //获取总页数
        let pageCount = document.querySelector("#pageCount")
        //获取每页数量
        let pageSize = document.querySelector("#pageSize")
        //获取first按钮
        let first = document.querySelector("#first")
        //获取上一页按钮
        let prev = document.querySelector("#prev")
        //获取下一页按钮
        let next = document.querySelector("#next")
        //获取last按钮
        let last = document.querySelector("#last")
        //获取num文本框
        let num = document.querySelector("#num")
        //获取确定按钮
        let ok = document.querySelector("#ok")
        //获取添加按钮
        let add = document.querySelector("#add")
        //获取添加层
        let show = document.querySelector("#show")
        //获取添加层的关闭按钮
        let close = document.querySelector("#close")

        //关闭添加层按钮点击事件
        close.onclick = function(){
            show.style.display = "none"
            //调用iframe里面的表单的重置方法
            window.frames["iframe"].document.getElementById("form").reset()
        }

        //添加按点击事件，
        add.onclick = function(){
            //显示添加层
            show.style.display = "block"
        }

        //没有显示数量下拉框，内容改变后事件
        pageSize.onchange = function(){
            //获取搜索数据
            let obj = getSearchData()
            num.value = ""  //清空num文本框
            //调用加载数据的方法
            loadData(obj.studentName, obj.sex, 1, obj.pSize)
        }

        //确定按钮点击事件
        ok.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            //将num框里面的数据转int
            let val = parseInt(num.value)
            //判断输入的值，是否大于0
            if (val > 0) {
                //判断输入的值，是否大于总页数
                if (val > parseInt(pageCount.innerText)) {
                    //如果大于总页数，就重新赋值等于总页数
                    val = parseInt(pageCount.innerText)
                    num.value = val
                }
                //调用加载数据的方法
                loadData(obj.studentName, obj.sex, val, obj.pSize)
            } else {
                alert("请输入正确的页码！")
                num.value=""
            }
        }

        //下一页按钮点击事件
        next.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            let pIndex = parseInt(obj.pIndex)  //获取当前页
            let pCount = parseInt(pageCount.innerText)  //获取总页数
            //如果当前页，小于总页数
            if (pIndex < pCount) {
                pIndex++  //当前页加1
                //调用加载数据的方法
                loadData(obj.studentName, obj.sex, pIndex, obj.pSize)
            } else {
                alert("已经是最后一页！")
            }
        }

        //上一页按钮点击事件
        prev.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            let pIndex = parseInt(obj.pIndex) //获取当前页
            //判断当前页是否大于1
            if (pIndex > 1) {
                pIndex--  //当前页减1
                //调用加载数据的方法
                loadData(obj.studentName, obj.sex, pIndex, obj.pSize)
            } else {
                alert("已经是第一页！")
            }
        }

        //last按钮点击事件
        last.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            //调用加载数据的方法
            loadData(obj.studentName, obj.sex, pageCount.innerText, obj.pSize)
        }

        //first按钮点击事件
        first.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            //调用加载数据的方法
            loadData(obj.studentName, obj.sex, 1, obj.pSize)
        }

        //搜索按钮的点击事件
        btnSearch.onclick = function () {
            //获取搜索数据
            let obj = getSearchData()
            //调用加载数据的方法
            loadData(obj.studentName, obj.sex, obj.pIndex, obj.pSize)
        }

        //返回搜索数据的方法
        function getSearchData() {
            let studentName = txtStudentName.value  //获取文本框中的学生姓名
            let sex = ""  //性别
            for (let i = 0; i < genders.length; i++) {
                if (genders[i].checked) {
                    sex = genders[i].value
                    break
                }
            }
            let pIndex = pageIndex.innerText  //获取当前页
            let pSize = pageSize.value    //获取每页显示数量
            return {
                studentName,
                sex,
                pIndex,
                pSize
            }
        }

        // 创建标签的方法
        function c(val) {
            return document.createElement(val)
        }

        //显示分页数据
        function showPages(pageIndex, pageSize, count) {
            //显示当前页
            this.pageIndex.innerText = pageIndex
            //显示总页数
            pageCount.innerText = Math.ceil(count / pageSize)
        }

        //创建tr的方法
        function createTrData(stus) {
            tbody.innerHTML = "";   //tbody每次清空内容
            stus.forEach(s => {
                let tr = c("tr")
                let td1 = c("td")
                let ck = c("input")
                ck.type = "checkbox"
                ck.className = "ck"
                td1.appendChild(ck)
                tr.appendChild(td1)

                let td2 = c("td")
                td2.innerText = s.StudentNo
                tr.appendChild(td2)

                let td3 = c("td")
                td3.innerText = s.LoginPwd
                tr.appendChild(td3)

                let td4 = c("td")
                td4.innerText = s.StudentName
                tr.appendChild(td4)

                let td5 = c("td")
                td5.innerText = s.Sex === "M" ? "男" : "女"
                tr.appendChild(td5)

                let td6 = c("td")
                td6.innerText = s.Grade.GradeName
                tr.appendChild(td6)

                let td7 = c("td")
                td7.innerText = s.Phone
                tr.appendChild(td7)

                let td8 = c("td")
                td8.innerText = s.Address
                tr.appendChild(td8)

                let td9 = c("td")
                td9.innerText = _b.simpleDate(new Date(s.BornDate), 1)
                tr.appendChild(td9)

                let td10 = c("td")
                td10.innerText = s.Email
                tr.appendChild(td10)

                let td11 = c("td")
                td11.innerText = s.IdentityCard
                tr.appendChild(td11)

                let td12 = c("td")
                let btn1 = c("button")
                btn1.innerText = "修改"
                btn1.className = "upd"
                td12.appendChild(btn1)
                let btn2 = c("button")
                btn2.innerText = "删除"
                btn2.className = "del"
                td12.appendChild(btn2)
                tr.appendChild(td12)

                //将行添加到tbody中
                tbody.appendChild(tr)
            });
        }

        //加载数据的方法
        let loadData = function (studentName = null, sex = null, pageIndex = null, pageSize = null) {
            //定义请求的接口地址
            let url = 'http://119.45.221.185:81/Student/GetStudentsConditionPages?'
            let obj = {}
            //判断是否要根据姓名查询
            if (studentName !== null) {
                obj["studentName"] = studentName
            }
            //判断是否要根据性别查询
            if (sex !== null) {
                obj["sex"] = sex
            }
            //判断当前页
            if (pageIndex !== null) {
                obj["pageIndex"] = pageIndex
            }
            //判断每页数量
            if (pageSize != null) {
                obj["pageSize"] = pageSize
            }
            //返回url的参数字符串
            let params = _b.parseObjToStr(obj)
            url += params;

            //01.创建ajax对象
            let xhr = new XMLHttpRequest()
            //02.初始化参数
            xhr.open('GET', url);
            //03.发送请求
            xhr.send()
            //04.获取数据
            xhr.onreadystatechange = function () {
                //判断请求状态
                if (xhr.readyState === 4) {
                    //判断状态编码
                    if (xhr.status >= 200 && xhr.status < 400) {
                        //获取后台返回的数据，并转为js对象
                        let data = JSON.parse(xhr.response)
                        //调用创建行的方法，将数据传进去
                        createTrData(data.data)
                        //显示分页信息
                        showPages(data.pageIndex, data.pageSize, data.count)
                    }
                }
            }
        }

        loadData()   //调用加载数据的方法
    </script>
</body>

</html>